import React from 'react'
import { Button, Form,message,notification } from 'antd'
import { SmileOutlined } from '@ant-design/icons';
import BaseForm  from '@comp/Form/index'    
import { login } from '@net/user/index'
import md5 from 'blueimp-md5'


export default class Login extends BaseForm {
    // 表单验证及登录
    public validateFields = () => {
        this.formRef.current.validateFields().then(() => {
            const values = this.getFieldsValue()
            values.passWord = md5(values.passWord)
            login(values).then((res:any) => {
                const {status,msg,data} = res.data
                if(status === 203){
                    message.error(msg)
                    return
                } else {
                    notification.open({
                        message: msg,
                        icon: <SmileOutlined style={{ color: '#108ee9' }} />,
                      });
                    this.props.go(data)
                }
            })
        }).catch((err:any) => {
            if(err){console.log("请输入信息")}
        })
    }
    public renderButton() {
        return (
            <div className="login_form_btn">
                <Button style={{width:"100px"}} type="primary" onClick={() => {this.validateFields()}}>登录</Button>
                <Button style={{width:"100px"}} type="default" onClick={()=> {this.resetFields()}}>重置</Button>
            </div>
        )
    }
    public renderForm() {
        const { column } = this.props
        const formCol = {
            labelCol:{span:8},
            wrapperCol:{span:16}
        }
        return (
            <Form ref={this.formRef} className="login_form" {...formCol}>
                {
                    column.map((item) => {
                        return (
                            this.renderFormItem(item)
                        )
                    })
                }
            </Form>
        )
    }
}